<template id="userTemplate">
  <div style="width: 100%;margin-top: 0px;">
    <div class="mt-4" style="margin-top: 20px;margin-bottom: 20px;">
      <el-input
          v-model="userRoleName"
          placeholder="请输入角色名称"
          @clear="getUserList"
          class="input-with-select"
          clearable
          style="width: 15%;margin-left: 10.5%"
      >
      </el-input>
      <el-button type="primary" id="sele" style="margin-left: 10px;" @click="getUserList()">
        <i class="el-icon-zoom-in"></i>搜索
      </el-button>
    </div>
    <el-table :data="userList" @selection-change="handleSelectionChange" border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
      <el-table-column type="selection" width="55" />
      <el-table-column label="角色编号" prop="userRoleId" />
      <el-table-column label="角色名称" prop="userRoleName" />
    </el-table>
    <!--分页-->
    <div class="demo-pagination-block">
      <el-pagination
          :current-page="limit.page"
          :page-sizes="[1,2,3,5,10]"
          :page-size="limit"
          :small="small"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import calms from "@/netWork/request"

export default {
  name: "selectUser",
  data() {
    return {
      // 表格数据
      userList: [],
      userRoleName: "",
      //大小
      small: false,
      //分页背景颜色
      background: true,
      total: 0,
      //第几页 默认第一页
      page: 1,
      //一页显示多少 默认5
      limit: 5
    }
  },
  // 界面初始化就要调用
  created() {
    this.getUserList()
  },

  methods: {

    handleSizeChange(val) {
      this.limit = val;  // 修改显示数
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.page = val;  // 更新当前的页
      this.getUserList()
    },

    // 获取表格数据
    async getUserList() {
      calms({
        url: '/selectLikeUserRole',
        method: "get",
        contentType: "application/json",
        params: {
          userRoleName: this.userRoleName,
          page: this.page,
          limit: this.limit
        }
      }, res => {
        //console.log("集合大小" + res.data);
        this.total = res.data.count;
        this.userList = res.data.data;
        console.log(this.userList = res.data.data);
      }, err => {
        // eslint-disable-next-line no-console
        console.log(err);
      },8100)

    },

    //监听获得选中行数据
    handleSelectionChange(val){
      this.multipleSelection =val
    },

    userEdit(row) {
      this.dialogVisible = true;
      this.editUser = row;
    },
    addUsers() {
      this.addDialogVisible = true;
    }

  }
}
</script>

<style scoped>
th{
  width: 20%;
  border: 1px;
}
td{
  width: 20%;
  border: 1px;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
  border: 1px;

}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  text-align: center;
}
</style>